<template>
  <div class="step-form-form">
    <Steps :current="current">
      <Step title="选择套餐" />
      <Step title="确认套餐信息" />
      <Step title="完成" />
    </Steps>
  </div>
  <br />
  <Step1 ref="step1" @viewStep1="getStep1Data" v-show="current === 0" />
  <Step2 ref="step2" @prev="goBack" @finish="finish" v-show="current === 1" />
  <Step3 ref="step3" v-show="current === 2" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Step1 from './Step1.vue';
import Step2 from './Step2.vue';
import Step3 from './Step3.vue';
import { Steps, Step } from 'ant-design-vue';

const current = ref(0);

const step1 = ref();
const step2 = ref();
const step3 = ref();
const getStep1Data = (step1Data) => {
  current.value++;
  step2.value.openStep2(step1.value.appName, step1Data);
};

const goBack = () => {
  current.value--;
};
const finish = (res: string) => {
  current.value++;
  step3.value.openStep3(res);
};
</script>

<style lang="less" scoped>
.step-form-content {
  padding: 24px;
  background-color: @component-background;
}

.step-form-form {
  width: 750px;
  margin: 0 auto;
}

.demo {
  border: 1px solid var(--el-border-color);
}
</style>
